var custom = {

	gridfashion1loaded : false,
	gridfashion2loaded : false,
	gridfashion3loaded : false,
	gridfashion1loader : undefined,
	gridfashion2loader : undefined,
	gridfashion3loader : undefined,
	loadingview : undefined,
	productdetailloader : undefined,
	productdetailloaded : false,

	init : function() {
		console.log("Netbiscuits Sapient Initialize");

		console.log("Init ContentLoader for FashionSpread Grid");
		custom.loadingview = tactile.page.getComponent("loadingview");

		custom.gridfashion1loader = new tactile.ContentLoader();
		custom.gridfashion1loader.onstart.subscribe(custom.showLoadingView);
		custom.gridfashion1loader.onsuccess
				.subscribe(custom.addGridContentFashionSpread1);
		custom.gridfashion1loader.onerror
				.subscribe(custom.handleLoaderError);

		custom.gridfashion2loader = new tactile.ContentLoader();
		custom.gridfashion2loader.onstart.subscribe(custom.showLoadingView);
		custom.gridfashion2loader.onsuccess
				.subscribe(custom.addGridContentFashionSpread2);
		custom.gridfashion2loader.onerror
				.subscribe(custom.handleLoaderError);

		custom.gridfashion3loader = new tactile.ContentLoader();
		custom.gridfashion3loader.onstart.subscribe(custom.showLoadingView);
		custom.gridfashion3loader.onsuccess
				.subscribe(custom.addGridContentFashionSpread3);
		custom.gridfashion3loader.onerror
				.subscribe(custom.handleLoaderError);
		
		custom.productdetailloader = new tactile.ContentLoader();
		custom.productdetailloader.onstart.subscribe(custom.showLoadingView);
		custom.productdetailloader.onsuccess
				.subscribe(custom.viewProductDetail);
		custom.productdetailloader.onerror
				.subscribe(custom.handleLoaderError);		

		tactile.EventManager.addListener("toggle-btn-fashion1", "tap",
				custom.loadFashionGridContent);
		
		tactile.EventManager.addListener("toggle-btn-fashion2", "tap",
				custom.loadFashionGridContent);

		tactile.EventManager.addListener("toggle-btn-fashion3", "tap",
				custom.loadFashionGridContent);

		tactile.EventManager.addListener("spread", "tap",
				custom.showFashionSpreadPage);
		tactile.EventManager.addListener("room", "tap",
				custom.showFittingRoomPage);
		

		tactile.EventManager.addListener("fittingroomitem1", "tap",custom.showProductDetailsPage);
		tactile.EventManager.addListener("fittingroomitem2", "tap",custom.showProductDetailsPage);
		tactile.EventManager.addListener("fittingroomitem3", "tap",custom.showProductDetailsPage);
		tactile.EventManager.addListener("fittingroomitem4", "tap",custom.showProductDetailsPage);
	},
	showNextProduct: function() {
		var mv = tactile.page.getComponent("mvproductgallery");
		mv.showNext();
	},
	showLoadingView : function() {
		custom.loadingview.show();
	},
	addGridContentFashionSpread1 : function(e) {
		// console.log(e)
		// we use timeout only for demo purpose, otherwise loading would be to
		// fast to notice the loading view.
		window
				.setTimeout(
						function() {

							// append the grid
							var fashionspread1grid = tactile.View
									.cast(custom.gridfashion1loader
											.getComponent("view-fashionspread1-item-list"));
							if (fashionspread1grid != 'undefined'
									&& fashionspread1grid != null) {
								custom.fashionspread1 = tactile.View
										.cast(tactile.page
												.getComponent("view-fashion1"));
								custom.fashionspread1
										.append(fashionspread1grid);
							}

							if (e.url.indexOf("grid_fashionspread1.xml") != -1) {
								custom.gridfashion1loaded = true;
							}

							// hide the loading view
							custom.loadingview.hide();

							var bigimage1 = tactile.page
									.getComponent("view-fashion1-big-image");
							var bigimage2 = tactile.page
									.getComponent("view-fashion2-big-image");
							var bigimage3 = tactile.page
									.getComponent("view-fashion3-big-image");

							bigimage1.hide();
							bigimage2.hide();
							bigimage3.hide();

							var fashionviewgrid1 = tactile.page
									.getComponent("view-fashionspread1-item-list");
							fashionviewgrid1.show();
							
							tactile.EventManager.addListener("toggle-btn-gridfashion1", "tap",
									custom.toggleFashionGridView);
							tactile.EventManager.addListener("productitem1", "tap", custom.showProductDetailsPage);
							tactile.EventManager.addListener("productitem2", "tap", custom.showProductDetailsPage);
							tactile.EventManager.addListener("productitem3", "tap", custom.showProductDetailsPage);
							tactile.EventManager.addListener("productitem4", "tap", custom.showProductDetailsPage);
							tactile.EventManager.addListener("productitem5", "tap", custom.showProductDetailsPage);
							tactile.EventManager.addListener("productitem6", "tap", custom.showProductDetailsPage);
						}, 500);
	},
	addGridContentFashionSpread2 : function(e) {
		// console.log(e)
		// we use timeout only for demo purpose, otherwise loading would be to
		// fast to notice the loading view.
		window
				.setTimeout(
						function() {

							// append the grid
							var fashionspread2grid = tactile.View
									.cast(custom.gridfashion2loader
											.getComponent("view-fashionspread2-item-list"));
							if (fashionspread2grid != 'undefined'
									&& fashionspread2grid != null) {
								custom.fashionspread2 = tactile.View
										.cast(tactile.page
												.getComponent("view-fashion2"));
								custom.fashionspread2
										.append(fashionspread2grid);
							}

							if (e.url.indexOf("grid_fashionspread2.xml") != -1) {
								custom.gridfashion2loaded = true;
							}

							// hide the loading view
							custom.loadingview.hide();

							var bigimage1 = tactile.page
									.getComponent("view-fashion1-big-image");
							var bigimage2 = tactile.page
									.getComponent("view-fashion2-big-image");
							var bigimage3 = tactile.page
									.getComponent("view-fashion3-big-image");

							bigimage1.hide();
							bigimage2.hide();
							bigimage3.hide();

							var fashionviewgrid2 = tactile.page
									.getComponent("view-fashionspread2-item-list");
							fashionviewgrid2.show();

							tactile.EventManager.addListener("toggle-btn-gridfashion2", "tap",
									custom.toggleFashionGridView);														

						}, 500);
	},
	addGridContentFashionSpread3 : function(e) {
		// console.log(e)
		// we use timeout only for demo purpose, otherwise loading would be to
		// fast to notice the loading view.
		window
				.setTimeout(
						function() {

							// append the grid
							var fashionspread3grid = tactile.View
									.cast(custom.gridfashion3loader
											.getComponent("view-fashionspread3-item-list"));
							if (fashionspread3grid != 'undefined'
									&& fashionspread3grid != null) {
								custom.fashionspread3 = tactile.View
										.cast(tactile.page
												.getComponent("view-fashion3"));
								custom.fashionspread3
										.append(fashionspread3grid);
							}

							if (e.url.indexOf("grid_fashionspread3.xml") != -1) {
								custom.gridfashion3loaded = true;
							}

							// hide the loading view
							custom.loadingview.hide();

							var bigimage1 = tactile.page
									.getComponent("view-fashion1-big-image");
							var bigimage2 = tactile.page
									.getComponent("view-fashion2-big-image");
							var bigimage3 = tactile.page
									.getComponent("view-fashion3-big-image");

							bigimage1.hide();
							bigimage2.hide();
							bigimage3.hide();

							var fashionviewgrid3 = tactile.page
									.getComponent("view-fashionspread3-item-list");
							fashionviewgrid3.show();
							
							tactile.EventManager.addListener("toggle-btn-gridfashion3", "tap",
									custom.toggleFashionGridView);

						}, 500);
	},
	handleLoaderError : function(e) {
		// notify with an alert about the error
		alert("Error loading the content: " + e.url + ", message: " + e.status
				+ " " + e.message);
		// hide the loading view
		custom.loadingview.hide();
	},
	loadFashionGridContent : function() {

		if (!custom.gridfashion1loaded || !custom.gridfashion2loaded
				|| !custom.gridfashion3loaded) {

			if (!custom.gridfashion1loaded) {
				custom.gridfashion1loader.load({
					url : "/remote/grid_fashionspread1.xml"
				});
			}

			if (!custom.gridfashion2loaded) {
				custom.gridfashion2loader.load({
					url : "/remote/grid_fashionspread2.xml"
				});
			}

			if (!custom.gridfashion3loaded) {
				custom.gridfashion3loader.load({
					url : "/remote/grid_fashionspread3.xml"
				});
			}

		} else {
			var bigimage1 = tactile.page
					.getComponent("view-fashion1-big-image");
			var bigimage2 = tactile.page
					.getComponent("view-fashion2-big-image");
			var bigimage3 = tactile.page
					.getComponent("view-fashion3-big-image");

			bigimage1.hide();
			bigimage2.hide();
			bigimage3.hide();

			var fashionviewgrid1 = tactile.page
					.getComponent("view-fashionspread1-item-list");
			fashionviewgrid1.show();

			var fashionviewgrid2 = tactile.page
					.getComponent("view-fashionspread2-item-list");
			fashionviewgrid2.show();

			var fashionviewgrid3 = tactile.page
					.getComponent("view-fashionspread3-item-list");
			fashionviewgrid3.show();
		}
	},
	toggleFashionGridView : function() {

		var bigimage1 = tactile.page.getComponent("view-fashion1-big-image");
		var bigimage2 = tactile.page.getComponent("view-fashion2-big-image");
		var bigimage3 = tactile.page.getComponent("view-fashion3-big-image");

		bigimage1.show();
		bigimage2.show();
		bigimage3.show();

		var fashionviewgrid1 = tactile.page
				.getComponent("view-fashionspread1-item-list");
		fashionviewgrid1.hide();

		var fashionviewgrid2 = tactile.page
				.getComponent("view-fashionspread2-item-list");
		fashionviewgrid2.hide();

		var fashionviewgrid3 = tactile.page
				.getComponent("view-fashionspread3-item-list");
		fashionviewgrid3.hide();
	},
	showFashionSpreadPage : function() {
		
		var bigimage1 = tactile.page.getComponent("view-fashion1-big-image");
		var bigimage2 = tactile.page.getComponent("view-fashion2-big-image");
		var bigimage3 = tactile.page.getComponent("view-fashion3-big-image");

		bigimage1.show();
		bigimage2.show();
		bigimage3.show();

		var fashionviewgrid1 = tactile.page
				.getComponent("view-fashionspread1-item-list");
		if (fashionviewgrid1!=null) {
			fashionviewgrid1.hide();
		}

		var fashionviewgrid2 = tactile.page
				.getComponent("view-fashionspread2-item-list");
		if (fashionviewgrid2!=null) {
			fashionviewgrid2.hide();
		}

		var fashionviewgrid3 = tactile.page
				.getComponent("view-fashionspread3-item-list");
		if (fashionviewgrid3!=null) {
			fashionviewgrid3.hide();		
		}
		
		var productgallery = tactile.page.getComponent("productgalleryview");
		if (productgallery!=null) {
			productgallery.hide();
		}
		
		var productdetail = tactile.page.getComponent("productdetailview");
		if (productdetail!=null) {
			productdetail.hide();		
		}
		
		var mv = tactile.page.getComponent("multiview-main-page");
		mv.show();
		mv.showView(0);
	},
	showFittingRoomPage : function() {
		
		var productgallery = tactile.page.getComponent("productgalleryview");
		if (productgallery!=null) {
			productgallery.hide();
		}
		
		var productdetail = tactile.page.getComponent("productdetailview");
		if (productdetail!=null) {
			productdetail.hide();		
		}
		
		var mv = tactile.page.getComponent("multiview-main-page");
		mv.show();
		mv.showView(1);
	},
	showProductDetailsPage: function() {

		if (!custom.productdetailloaded) {
			custom.productdetailloader.load({
				url : "/remote/product_detail.xml"
			});
		} else {

			var productgallery = tactile.page.getComponent("productgalleryview");
			productgallery.show();
			
			var productdetail = tactile.page.getComponent("productdetailview");
			productdetail.show();
			
			var mvmainpage = tactile.page.getComponent("multiview-main-page");
			mvmainpage.hide();
			
			
		}
	},
	viewProductDetail: function(e) {
		window
		.setTimeout(
				function() {
					
					var contentlayout = tactile.page.getComponent("content");
					
					var productdetailimg = custom.productdetailloader.getComponent("productgalleryview");
					contentlayout.append(productdetailimg);
					
					var productdetailtext = custom.productdetailloader.getComponent("productdetailview");
					contentlayout.append(productdetailtext);

					
					
					var mvmainpage = tactile.page.getComponent("multiview-main-page");
					mvmainpage.hide();
					
					
					tactile.EventManager.addListener("product1","tap", custom.showNextProduct);
					tactile.EventManager.addListener("product2","tap", custom.showNextProduct);
					tactile.EventManager.addListener("product3","tap", custom.showNextProduct);
					tactile.EventManager.addListener("product4","tap", custom.showNextProduct);					
					
					// hide the loading view
					custom.loadingview.hide();

					
					if (e.url.indexOf("product_detail.xml") != -1) {
						custom.productdetailloaded = true;
					}
						
				}, 500);
	}
};
tactile.page.onready(custom.init);